<template>
  <view class="main">
    <view class="page-content">
      
      <Empty v-if="queryResult.isQueryed && !queryResult.list.length" />
        <view class="list" v-for="(item, index) in queryResult.list" :key="index" >
            <Detailed :detailed="item" type="point"/>
        </view>
    </view>

  </view>
</template>

<script setup>
import { reactive, ref, computed } from 'vue'
import { useStore } from 'vuex'
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import { userPointDetailApi } from '@/api/user'
import Detailed from "@/components/detailed/detailed.vue";

const queryResult = reactive({
  isLast: false,
  isQueryed: false,
  list: []
})
const queryData = reactive({
  page: 1,
  size: 10
})

onLoad(()=> {
    init()
})
onReachBottom(()=> {
  loadNextPage()
})
async function loadNextPage(){
  if(queryResult.isLast) {
    return
  }
  queryData.page += 1;
  getListData()
}
async function init() {
  queryData.page = 1;
  queryResult.isLast = false
  await getListData()
}
async function getListData(){
  if(queryResult.isLast) {
    return
  }
  uni.showLoading()
  const res = await userPointDetailApi({...queryData}).finally(()=> {
    uni.hideLoading()
    setTimeout(()=>{
      queryResult.isQueryed = true
    })
  })
  if(queryData.page === 1) {
    queryResult.list = [...res.items]
  } else {
    queryResult.list.push(...res.items)
  }
  queryResult.isLast = queryResult.list.length === res.total
  
}

</script>

<style lang='scss' scoped>
.main{
  min-height: 100vh;
  background: #F4F6F8;
  padding-bottom: 100rpx;
  .page-content{
    padding: 0 32rpx;
    background: #fff;
    .list{
        padding: 32rpx 0;
        background: #fff;
        border-bottom: 1px solid #D8D8D8;
        &:last-child{
            border-bottom: none;
        }
    } 
  }

}
</style>
